<template>
  <css-doodle style="position: absolute">
    :doodle { @grid: 1x10 / 40vmin; } @place-cell: center; @size: calc(@index()
    * 10%); border-radius: 50%; border-style: dashed; border-width:
    calc(@index() * 1vmin); border-color: hsla( calc(20 * @index()), 70%, 68%,
    calc(3 / @index() * .8) ); --d: @rand(20s, 40s); --rf: @rand(360deg); --rt:
    calc(var(--rf) + @pick(1turn, -1turn)); animation: spin var(--d) linear
    infinite; @keyframes spin { from { transform: rotate(var(--rf)) } to {
    transform: rotate(var(--rt)) } } justify-self: center; align-items: center;
  </css-doodle>
</template>

<script>
import "css-doodle";
export default {};
</script>

<style lang="scss" scoped></style>
